<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .done li {
            color: gray;
            text-decoration: line-through;
        }

        .todo li {
            width: 160px;
            height: 28px;
            position: relative;
        }

        .todo li button {
            position: absolute;
            right: 0;
            top: 0;
        }
    </style>
</head>

<body>
    <div id="app">
        <p>列表清单</p>

        <input type="text" placeholder="请输入待完成事项" v-model="event">
        <button @click="save">保存</button>

        <p>待办事项</p>
        <ol class="todo">
            <li v-for='(item,index) in before' v-bind:key='item.id'>
                {{item.title}}
                <button @click="Done(index,item)">已做</button>
            </li>

        </ol>

        <p>已完成事项</p>
        <ol class="done">
            <li v-for='(item,index) in after'>
                {{item.title}}
            </li>
        </ol>


    </div>





    <script src="../vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                before: [
                    { id: 1, title: '背单词' }
                ],
                nextBeforeId: 2,
                after: [
                    { id: 1, title: '写代码' }
                ],
                nextAfterId: 2,
            },

            methods: {

                save() {
                    this.before.push({
                        id: this.nextBeforeId++,
                        title: this.event
                    })
                    this.event = ''
                },

                Done(index, item) {
                    this.before.splice(index, 1);
                    this.after.push({
                        id: this.nextAfterId++,
                        title: item.title
                       
                    })
                }

            }
        })

    </script>
</body>

</html>